<template>
  <div>
    <el-form :model="step" ref="form" label-width="100px" :rules="rules">
      <el-form-item label="步骤名称" prop="name">
        <el-input v-model="step.name" style="width: 550px"></el-input>
      </el-form-item>
      <el-form-item label="数据源选择">
        <el-form-item prop="connection">
          <el-select v-model="step.connection" style="width: 550px" placeholder="目标数据源">
            <el-option v-for="source in dataSourceList" :label="source.name" :value="source.id">
              <span style="float: left">{{ source.name }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ source.type }}</span>
            </el-option>
          </el-select>
        </el-form-item>
      </el-form-item>
      <el-form-item label="存储过程名称">
        <el-input v-model="step.procedure" style="width: 550px"></el-input>
      </el-form-item>
      <el-form-item label="返回值名称">
        <el-input v-model="step.result_name" style="width: 39%;margin-right: 20px"></el-input>
        返回值类型
        <el-select v-model="step.result_type"></el-select>
      </el-form-item>
      <el-button type="primary" @click="fetchFields">获取字段</el-button>
      <el-button icon="plus" @click="_addRecord"></el-button>
      <br><br>
      <el-table :data="step.fields" stripe :max-height="300">
        <el-table-column label="名称">
          <template scope="scope">
            <div v-if="!scope.row.edit">{{scope.row.name}}</div>
            <div v-else>
              <el-select size="small" v-model="scope.row.name" placeholder="名称">
                <el-option v-for="item in step.availableFields" :value="item.name"></el-option>
              </el-select>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="方向">
          <template scope="scope">
            <div v-if="!scope.row.edit">{{scope.row.direction}}</div>
            <div v-else>
              <el-select size="small" v-model="scope.row.direction">
                <el-option v-for="item in options.directions" :label="item.name" :value="item.value"></el-option>
              </el-select>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="类型">
          <template scope="scope">
            <div v-if="!scope.row.edit">{{scope.row.type}}</div>
            <div v-else>
              <el-select size="small" v-model="scope.row.type">
                <el-option v-for="item in options.types" :value="item"></el-option>
              </el-select>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" class-name="table-row">
          <template scope="scope">
            <el-row>
              <el-col :span="12">
                <el-button size="small" type="info" @click="reverseEditState(scope.$index, scope.row)">编辑</el-button>
              </el-col>
              <el-col :span="12">
                <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </div>
</template>
<style>

</style>
<script>
  import HttpRequest from "../../model/HttpRequset";
  import {Steps, Options, Fields} from "../../model/DataModel";
  import StepCommon from "./mixins/StepMixin";
  import DataSourceCommon from "./mixins/DataSourceMixin";
  export default{
    mounted(){
      HttpRequest.requestSourceList().then((response) => {
        this.dataSourceList = response.data.ds
      }).catch((response) => {
        this.$notify.error({title: '错误', message: "获取数据库列表失败", duration: 2000, offset: 200});
      });
    },

    mixins: [StepCommon],
    data(){
      return {
        dataSourceList: "",
        step: Steps.DBProc(),
        options: {
          types: Options.inputTypes,
          directions:Options.directions
        },
      }
    },
    methods: {
      fetchFields(){
        this.step.fields = this.step.availableFields.map(el => (Fields.DBProc({
          name: el.name,
          edit: false
        })));
      },
      updateFields(){
        this.step.outputFields.push(this.step.result_name);
      },
    }
  }
</script>
